<template>
  <div class="login">
    <div class="header">
      <span class="title">注册/登录</span>
    </div>
    <div class="section">
      <div class="logo">
        <van-image
          class="logo_img"
          :src="require('@/assets/img/goodsDetail/login_logo.png')"
        />
      </div>
      <div class="login_container">
        <h1 class="login_title">新用户手机号码验证后自动注册</h1>
        <van-cell-group class="login_input">
          <van-field class="login_input_phone" v-model="phone" placeholder="请输入用户名" />
          <van-field
            class="login_input_sms"
            v-model="smsCode"
            center
            clearable
            placeholder="短信验证码"
          >
            <van-button class="login_input_sms_btn" slot="button" size="small" type="primary">获取验证码</van-button>
          </van-field>
        </van-cell-group>
      </div>
      <van-button class="login_btn" type="default" @click="login">登录/注册</van-button>
      <p class="login_name_psw">账号密码登录</p>
    </div>
  </div>
</template>

<script>
  import { Image, Field } from 'Vant';
export default {
  data() {
    return {
      phone: '',
      smsCode: '',
    };
  },
  methods: {
    login() {
      // 请求参数
      // let data = {
      //   phone: this.phone,
      //   smsCode: this.smsCode
      // };
      this.$axios.get('/api/demo/test1').then(res => {
        console.log(res)
        if (res.data.code === 1) {
          this.$router.push("/index")
        }
        // // 修改登陆状态
        // this.$store.commit("updateLogin", true);
        // // 把token存入store
        // this.$store.commit("updateToken", res.user.token);
        // // 把用户名存入store
        // this.$store.commit("updateUsername", res.user.phone);
        // this.$router.push("/my");
      }).catch(err=> {
        console.log(err, '登陆失败')
      });
    }
  }
};
</script>

<style lang="less" scoped>
@deep: ~">>>";
.login {
  width: 100%;
  background:rgba(255,255,255,1);
  .header {
    width:750px;
    height:128px;
    background:rgba(255,255,255,1);
    .title {
      display:block;
      width: 193px;
      height:37px;
      margin: 0 auto;
      line-height: 128px;
      font-size:38px;
      font-family:PingFang SC;
      font-weight:bold;
      color:rgba(51,51,51,1)
    }
  }
  .section {
    width:749px;
    height:1206px;
    background:rgba(255,255,255,1);
    padding: 46px;
    .logo {
      padding-top: 114px;
      height: 289px;
      .logo_img {
        display: block;
        width:173px;
        height:61px;
        margin: 0 auto;
      }
    }
    .login_container {
      .login_title {
        font-size:36px;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(51,51,51,1);
      }
      .login_input {
        margin-top: 30px;
        height: 200px;
        width: 100%;
        .login_input_phone {
          height: 100px;
          border-bottom: 1px solid #E2E2E2;
          .van-cell__value {
            height: 100%;
            /*line-height: 100px;*/
          }
          @{deep} .van-field__body {
            .van-field__control {
              /*font-size:15px;*/
              /*font-family:PingFang SC;*/
              /*font-weight:500;*/
              /*color:rgba(136,136,136,1);*/
            }
          }
        }
        .login_input_sms{
          margin-top: 10px;
          height: 100px;
          border-bottom: 1px solid #E2E2E2;
          @{deep} .login_input_sms_btn {
            background:rgba(255,59,62,1);
            border: 1px solid rgba(255,59,62,1);
            border-radius:6px;
          }
        }
      }
      .login_input:after {
        border: none;
      }
    }
    .login_btn {
      margin-top: 138px;
      width:654px;
      height:98px;
      background:rgba(193,193,193,1);
      border-radius:10px;
      font-size:32px;
      font-family:PingFang SC;
      font-weight:500;
      color:rgba(255,255,255,1);
    }
    .login_name_psw {
      width:100%;
      height:25px;
      text-align: right;
      margin-top: 25px;
      font-size:26px;
      font-family:PingFang SC;
      font-weight:500;
      color:rgba(75,91,141,1);
    }
  }
}
</style>

